<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>病情评估-步骤</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="../css/font-awesome-4.3.0/css/font-awesome.min.css" />
		<link href="../css/config.css" rel="stylesheet" />
		<link href="../css/base.css" rel="stylesheet" />
		<link href="../css/index.css" rel="stylesheet" />
		<link href="../css/guanjie.css" rel="stylesheet" />
		<style>
			.mui-control-content {
				background-color: white;
				min-height: 215px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
			
			.mui-fullscreen .mui-segmented-control~.mui-slider-group {
				top: 113px;
			}
			
			.mui-slider-indicator.mui-segmented-control {
				z-index: 1000;
			}
			
			.mui-slider-progress-bar {
				top: -39px!important;
				background-color: #61DEB6!important;
				margin-left: 56px;
			}
			
			.mui-slider .mui-segmented-control.mui-segmented-control-inverted~.mui-slider-group .mui-slider-item {
				border-top: 0px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav km-navbar white-header">
			<a class="mui-icon mui-icon-back mui-pull-left mui-action-back"></a>
			<h1 id="title" class="mui-title km-view-title">自我评估</h1>
			<a class="mui-icon mui-icon-checkmarkempty mui-pull-right " ontouchstart="PGsubmit()">提交</a>
		</header>
		<div id="slider" class="mui-slider mui-content3 mui-fullscreen mui-scroll-wrapper">
			<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted pg-step">
				<a class="mui-control-item mui-active" href="#item1mobile">
					<span>1</span>
				</a>
				<a class="mui-control-item" href="#item2mobile">
					<span>2</span>
				</a>
				<a class="mui-control-item" href="#item3mobile">
					<span>3</span>
				</a>
				<a class="mui-control-item" href="#item4mobile">
					<span>4</span>
				</a>
			</div>
			<div class="pg-step-linear"></div>
			<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-3"></div>
			<div class="mui-slider-group pg-content">

				<!---------------------------第一步------------------------------------->
				<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
					<div class="title">第一步：<span>请选择压痛关节数</span></div>
					<div class="sim-guanjie">
						<ul class="guanjie-list guanjie-list-left">
							<li class="title">左</li>
							<li class="guanjie-li guanjie1">
								<label>肩</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf3','左肩');"></a>
							</li>
							<li class="guanjie-li guanjie2">
								<label>肘</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf4','左肘');"></a>
							</li>
							<li class="guanjie-li guanjie3">
								<label>腕</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf5','左腕');"></a>
							</li>
							<li class="guanjie-li guanjie4">
								<label>手</label>
								<a href="#ytmodal_hand_left" id="modal_hand_left_open" class="mui-btn"></a>
							</li>
							<li class="guanjie-li guanjie5">
								<label>膝</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf31','左膝');"></a>
							</li>
						</ul>
						<ul class="guanjie-list guanjie-list-right">
							<li class="title">右</li>
							<li class="guanjie-li guanjie6">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf18','右肩');"></a>
								<label>肩</label>
							</li>
							<li class="guanjie-li guanjie7">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf19','右肘');"></a>
								<label>肘</label>
							</li>
							<li class="guanjie-li guanjie8">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf20','右腕');"></a>
								<label>腕</label>
							</li>
							<li class="guanjie-li guanjie9">
								<a ontouchstart="" data-rel="modalview" href="#ytmodal_hand_right" id="modal_hand_right_open"></a>
								<label>手</label>
							</li>
							<li class="guanjie-li guanjie10">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf38','右膝');"></a>
								<label>膝</label>
							</li>
						</ul>
						<img src="../img/IMG_1707.png" width="100%" />
					</div>
					<div class="step-1-score">
						<div class="inner">
							<span class="step-title-1">压痛关节数:</span>
							<span class="step-input" id="ytgjzsCount"> 0 </span>
						</div>
					</div>
				</div>
				<!---------------------------第二步------------------------------------->
				<div id="item2mobile" class="mui-slider-item mui-control-content">
					<div class="title">第二步：<span>请选择肿胀关节数</span></div>
					<div class="sim-guanjie">
						<ul class="guanjie-list guanjie-list-left">
							<li class="title">左</li>
							<li class="guanjie-li guanjie1">
								<label>肩</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf47','左肩');"></a>
							</li>
							<li class="guanjie-li guanjie2">
								<label>肘</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf48','左肘');"></a>
							</li>
							<li class="guanjie-li guanjie3">
								<label>腕</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf49','左腕');"></a>
							</li>
							<li class="guanjie-li guanjie4">
								<label>手</label>
								<a href="#zzmodal_hand_left" id="modal_hand_left_open" class="mui-btn"></a>
							</li>
							<li class="guanjie-li guanjie5">
								<label>膝</label>
								<a ontouchstart="guanjieChose();setGuanjieValue('pf75','左膝');"></a>
							</li>
						</ul>
						<ul class="guanjie-list guanjie-list-right">
							<li class="title">右</li>
							<li class="guanjie-li guanjie6">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf62','右肩');"></a>
								<label>肩</label>
							</li>
							<li class="guanjie-li guanjie7">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf63','右肘');"></a>
								<label>肘</label>
							</li>
							<li class="guanjie-li guanjie8">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf64','右腕');"></a>
								<label>腕</label>
							</li>
							<li class="guanjie-li guanjie9">
								<a href="#zzmodal_hand_right" id="modal_hand_right_open"></a>
								<label>手</label>
							</li>
							<li class="guanjie-li guanjie10">
								<a ontouchstart="guanjieChose();setGuanjieValue('pf82','右膝');"></a>
								<label>膝</label>
							</li>
						</ul>
						<img src="../img/IMG_1707.png" width="100%" />
					</div>
					<div class="step-1-score">
						<div class="inner">
							<span class="step-title-1">肿胀关节数:</span>
							<span class="step-input" id="ytgjzsCount"> 0 </span>
						</div>
					</div>

				</div>
				<!---------------------------第三步------------------------------------->
				<div id="item3mobile" class="mui-slider-item mui-control-content">
					<div class="title">第三步：<span>请填写血液检查结果</span></div>
					<p class="step-tip">提示：以下两项为必填</p>
					<ul class="mui-table-view yinhangka-ul" style="margin-top:10px;">
						<li class="mui-table-view-cell">
							<a href="#"><font color="red">*</font><span class="left">C反应蛋白</span><div class="input-unit"><span class="unit">mg/L</span><input type="text" placeholder="00.00"/></div></a>
						</li>
						<li class="mui-table-view-cell">
							<a href="#"><font color="red">*</font><span class="left">血沉</span><div class="input-unit"><span class="unit">mm/小时</span><input type="text" placeholder="000"/></div></a>
						</li>
					</ul>
				</div>
				<!---------------------------第四步------------------------------------->
				<div id="item4mobile" class="mui-slider-item mui-control-content" style="margin-left: -13px;">
					<div class="title">第四步：<span>请给出病情视觉评分</span></div>
					<p class="step-tip">提示：滑动选择评分值，100分满分</p>
					<div class="mui-input-row mui-input-range range-4">
						<input type="range" id='block-range' value="50" min="0" max="100">
						<div class="smail-box">
							<img src="../img/no-pain.png" class="smail-100" />
							<img src="../img/very-pain.png" class="smail-0" />
						</div>
					</div>
					<p style="clear: left;" class="Rangetitle">评估值（0-100）：<span id='block-range-val'>50</span></p>
				</div>
			</div>
		</div>
		<!--压痛——左手弹出框-->
		<div id="ytmodal_hand_left" class="mui-popover hand-popover" style="height:300px;">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="lh-title">左手压痛关节数 </p>
					<a class="pop-close mui-icon mui-icon-closeempty" ontouchstart="togglePop1()"></a>
					<div class="handarea">
						<img src="../img/left-hand.png" width="100%" />
						<a id="ytleft_hand_1" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf7','左拇指近端指间');"></a>
						<a id="ytleft_hand_2" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf9','左食指近端指间');"></a>
						<a id="ytleft_hand_3" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf11','左中指近端指间');"></a>
						<a id="ytleft_hand_4" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf13','左无名指近端指间');"></a>
						<a id="ytleft_hand_5" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf15','左小指近端指间');"></a>
						<a id="ytleft_hand_6" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf6','左拇指掌指');"></a>
						<a id="ytleft_hand_7" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf8','左食指掌指');"></a>
						<a id="ytleft_hand_8" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf10','左中指掌指');"></a>
						<a id="ytleft_hand_9" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf12','左无名指掌指');"></a>
						<a id="ytleft_hand_10" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf14','左小指掌指');"></a>
					</div>
				</div>
			</div>
		</div>
		<!--压痛左手弹出框 end-->

		<!--压痛右手弹出框-->
		<div id="ytmodal_hand_right" class="mui-popover hand-popover" style="height:300px;">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="lh-title">右手压痛关节数 </p>
					<a class="pop-close mui-icon mui-icon-closeempty" ontouchstart="togglePop2()"></a>
					<div class="handarea">
						<img src="../img/right-hand.png" width="100%" />
						<a id="ytright_hand_1" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf22','右拇指近端指间');"></a>
						<a id="ytright_hand_2" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf24','右食指近端指间');"></a>
						<a id="ytright_hand_3" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf26','右中指近端指间');"></a>
						<a id="ytright_hand_4" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf28','右无名指近端指间');"></a>
						<a id="ytright_hand_5" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf30','右小指近端指间');"></a>
						<a id="ytright_hand_6" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf21','右拇指掌指');"></a>
						<a id="ytright_hand_7" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf23','右食指掌指');"></a>
						<a id="ytright_hand_8" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf25','右中指掌指');"></a>
						<a id="ytright_hand_9" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf27','右无名指掌指');"></a>
						<a id="ytright_hand_10" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf29','右小指掌指');"></a>
					</div>
				</div>
			</div>
		</div>
		<!--压痛右手弹出框 end-->

		<!--肿胀——左手弹出框-->
		<div id="zzmodal_hand_left" class="mui-popover hand-popover" style="height:300px;">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="lh-title">左手肿胀关节数 </p>
					<a class="pop-close mui-icon mui-icon-closeempty" ontouchstart="togglePop3()"></a>
					<div class="handarea">
						<img src="../img/left-hand.png" width="100%" />
						<a id="left_hand_1" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf7','左拇指近端指间');"></a>
						<a id="left_hand_2" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf9','左食指近端指间');"></a>
						<a id="left_hand_3" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf11','左中指近端指间');"></a>
						<a id="left_hand_4" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf13','左无名指近端指间');"></a>
						<a id="left_hand_5" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf15','左小指近端指间');"></a>
						<a id="left_hand_6" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf6','左拇指掌指');"></a>
						<a id="left_hand_7" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf8','左食指掌指');"></a>
						<a id="left_hand_8" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf10','左中指掌指');"></a>
						<a id="left_hand_9" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf12','左无名指掌指');"></a>
						<a id="left_hand_10" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf14','左小指掌指');"></a>
					</div>
				</div>
			</div>
		</div>
		<!--肿胀——左手弹出框 end-->

		<!--肿胀——右手弹出框-->
		<div id="zzmodal_hand_right" class="mui-popover hand-popover" style="height:300px;">
			<div class="mui-scroll-wrapper">
				<div class="mui-scroll">
					<p class="lh-title">右手肿胀关节数 </p>
					<a class="pop-close mui-icon mui-icon-closeempty" ontouchstart="togglePop4()"></a>
					<div class="handarea">
						<img src="../img/right-hand.png" width="100%" />
						<a id="right_hand_1" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf22','右拇指近端指间');"></a>
						<a id="right_hand_2" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf24','右食指近端指间');"></a>
						<a id="right_hand_3" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf26','右中指近端指间');"></a>
						<a id="right_hand_4" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf28','右无名指近端指间');"></a>
						<a id="right_hand_5" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf30','右小指近端指间');"></a>
						<a id="right_hand_6" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf21','右拇指掌指');"></a>
						<a id="right_hand_7" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf23','右食指掌指');"></a>
						<a id="right_hand_8" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf25','右中指掌指');"></a>
						<a id="right_hand_9" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf27','右无名指掌指');"></a>
						<a id="right_hand_10" class="hand_guanjie" ontouchstart=" guanjieChose();setGuanjieValue('pf29','右小指掌指');"></a>
					</div>
				</div>
			</div>
		</div>
		<!--肿胀——右手弹出框 end-->
		<script src="../js/zepto.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/Global.js"></script>
		<script src="../js/index.js"></script>
		<script src="../js/guanjie.js"></script>
		<script type="text/javascript" charset="utf-8">
			mui.init();

			function plusReady() {
				var handBoxh;
				guanjieHeightSetting();
				$('.mui-scroll-wrapper').scroll({
					indicators: true //是否显示滚动条
				});
			}
			if (window.plus) {
				plusReady();
			} else {
				document.addEventListener('plusready', plusReady, false);
			}
				
				//===========步骤滑动-slider
				//在最终提交的时候进行表单校验，1、2步不管，若第3步有缺，跳转到第四步的时候弹出提示
				var item2 = document.getElementById('item2mobile');
				var item3 = document.getElementById('item3mobile');
				document.getElementById('slider').addEventListener('slide', function(e) {
					if (e.detail.slideNumber === 1) {} else if (e.detail.slideNumber === 2) {}
				});
				var sliderSegmentedControl = document.getElementById('sliderSegmentedControl');
				$('.mui-input-group').on('change', 'input', function() {
					if (this.checked) {
						sliderSegmentedControl.className = 'mui-slider-indicator mui-segmented-control mui-segmented-control-inverted mui-segmented-control-' + this.value;
						sliderProgressBar.setAttribute('style', sliderProgressBar.getAttribute('style'));
					}
				});
			//============popover高度计算
			mui('body').on('shown', '.mui-popover', function(e) {
				$(".hand-popover").css("height", handBoxh);
			});
			//=======popover显隐切换
			function togglePop1() {
				mui('#ytmodal_hand_left').popover('toggle');
			}

			function togglePop2() {
				mui('#ytmodal_hand_right').popover('toggle');
			}

			function togglePop3() {
				mui('#zzmodal_hand_left').popover('toggle');
			}

			function togglePop4() {
				mui('#zzmodal_hand_right').popover('toggle');
			}
			//			第四步滑块
			//监听input事件，获取range的value值，也可以直接element.value获取该range的值
			var rangeList = document.querySelectorAll('input[type="range"]');
			for (var i = 0, len = rangeList.length; i < len; i++) {
				rangeList[i].addEventListener('input', function() {
					if (this.id.indexOf('field') >= 0) {
						document.getElementById(this.id + '-input').value = this.value;
					} else {
						document.getElementById(this.id + '-val').innerHTML = this.value;
					}
				});
			}
			//	    提交评估报告，表单校验
			function PGsubmit() {
				alert("第三步未填写完整！");
			}
		</script>
	</body>

</html>